<template>
    <div class="header_tab" ref="headertab">
      <div style="width:100%;">
      <ul ref="tabitem">
        <li
          v-for="(item, index) in listArray"
          :key="index"
          :class="index == current ? 'activeheader' : ''"
        >
        <!-- :to="{ path: item.view === '' ? '/' : item.view }" -->
          <router-link tag="span" :to="{path: item.view === '' ? '/' : item.view }" >
            <span class="tab_name" @click="getTab(index,item.view, $event)">{{ item.name }}</span>
          </router-link>
        </li>
      </ul>
      </div>
    </div>
</template>
 
<script>
export default {
  name: "HeaderTab",
  props: {
    listArray: {
      type: Array,
    },
    current:{
      //  type:Number,
       default:1,
    }
  },
  data() {
    return {
    };
  },
  methods: {
    getTab(index,tabview, e) {
      this.$emit('change',index,tabview,e)
    },
  },
};
</script>
<style lang="less">
// .header {
//   width: 100%;
//   height: 40px;
//   left: 17.5px;
//   background-color: #fff;
//   display: flex;
// }
.header_tab {
  width: 1200px;
  height: 60px;
  line-height: 60px;
  display: flex;
  background: #337BD7;
  flex-wrap: nowrap;
  // overflow: scroll;
  position: relative;
  //z-index: 99999;
  margin:0 auto;
  margin-top: -200px;
  // left: 16.5%;
  ul {
  display: inline-block;
  white-space: nowrap;
  width:100%;
  text-align: center;
}
li {
  display: inline-block;
  line-height: 60px;
  // padding: 0px 15px;
  // margin-left: 2px;
  // margin-right: 9px;
  margin-right: 6%;

  height: 16px;
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #FFFFFF;
  // 点击高亮某一项时,将原来的字体变大,会导致没有高亮的元素距离上面有空隙,会出现纵向滚动条
  margin-top: -1px;
}
.activeheader {
  position: relative;
  height: 20px;
  font-size: 20px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #FFFFFF;
}
.activeheader:after {
  position: absolute;
  content: "";
  //width: 65%;
  height: 6px;
  padding-top: -25px;
  left: 1px;
  right: 1px;
  background-color: #FF6501;
  // border-radius: 50px;
}
.tab_name{
  cursor: pointer;
}
}
.header_tab::-webkit-scrollbar {/* 谷歌浏览器隐藏滚动条 */
  display: none;
}
.header_tab {
   -ms-overflow-style: none; /*隐藏滚动条，当IE下溢出，仍然可以滚动*/
   scrollbar-width: none;/*火狐下隐藏滚动条*/
  }


</style>